<template>
  <div class="w-full h-full flex flex-col items-center justify-center">
    <h1 class="text-white text-52px font-bold mb-30px " style="letter-spacing: 0.4em;">场馆累计接待人次</h1>
    <div class="flex items-end">
      <div v-for="(digit, index) in digits" :key="index" class="flip-card mx-1">
        <div class="flip-card-inner">
          <!-- <div class="flip-card-front">{{ digit.prev }}</div> -->
          <div class="flip-card-back" :class="digit.next === '，' ? 'flip-card-back2' : 'flip-card-back'">
            {{ digit.next }}
          </div>
        </div>
      </div>
      <span class="text-white text-20px ml-2">次</span>
    </div>
    <!-- 新增购票占比模块 -->
    <div class="w-80% mt-8 flex flex-col ">
      <h2 class="text-white text-18px  mt-30px">购票占比: 线上/线下</h2>
      <div class="w-full mt-4">
        <div class="w-full flex h-6 rounded-full overflow-hidden">
          <div class="bg-[#FFBF2F] transition-all duration-1000 flex justify-center items-center" :style="{ width: `${onlinePercent}%` }">{{ onlinePercent }}%</div>
          <div class="bg-[#80EC98] transition-all duration-1000 flex justify-center items-center" :style="{ width: `${offlinePercent}%` }">{{ offlinePercent }}%</div>
        </div>
        <div class="text-white text-16px w-full text-center mt-16px">线上购票订单总数: <span class="text-3xl">{{ formatNumberWithCommas(onlineTicketsTotal) }}</span>笔</div>
        <!-- <div class="flex justify-between text-white text-16px mt-1">
          <span>线上购票</span>
          <span>线下购票</span>
        </div> -->
        <!-- <div class="flex justify-between text-white text-14px mt-2">
          <span>{{ onlinePercent }}%</span>
          <span>{{ offlinePercent }}%</span>
        </div> -->
      </div>
    </div>
    <div class="w-80% flex items-center justify-around mt-50px">
      <div class="flex flex-col justify-center items-center text-white">
        <div class="w-55px h-55px rounded-full flex justify-center items-center border border-[#244677] border-width-3 mb-6px">
          <img class="w-32px h-32px" src="@/assets/users.png" alt="">
        </div>
        
        <h5>总人数</h5>
        <p class="text-[#66BBF9] text-22px">5085</p>
      </div>
      <div class="flex flex-col justify-center items-center text-white">
        <div class="w-55px h-55px rounded-full flex justify-center items-center border border-[#244677] border-width-3 mb-6px">
          <img class="w-32px h-32px" src="@/assets/sack-dollar.png" alt="">
        </div>
        
        <h5>购票总金额</h5>
        <p class="text-[#66BBF9] text-22px">4483</p>
      </div>
      <div class="flex flex-col justify-center items-center text-white">
        <div class="w-55px h-55px rounded-full flex justify-center items-center border border-[#244677] border-width-3 mb-6px">
          <img class="w-32px h-32px" src="@/assets/shopify.png" alt="">
        </div>
        
        <h5>商城订单总额</h5>
        <p class="text-[#66BBF9] text-22px">3235</p>
      </div>
      <div class="flex flex-col justify-center items-center text-white">
        <div class="w-55px h-55px rounded-full flex justify-center items-center border border-[#244677] border-width-3 mb-6px">
          <img class="w-32px h-32px" src="@/assets/fire-alt.png" alt="">
        </div>
        
        <h5>手环销售数</h5>
        <p class="text-[#66BBF9] text-22px">2034</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed, onMounted } from 'vue'
import { useAutoRefresh } from '@/hooks/useAutoRefresh'

useAutoRefresh(fetchData)

// 模拟数据 - 线上/线下购票比例
const onlineTicketsTotal = ref(15262)
const onlineTickets = ref(65) // 线上购票比例
const offlineTickets = ref(35) // 线下购票比例

const onlinePercent = computed(() => onlineTickets.value)
const offlinePercent = computed(() => offlineTickets.value)

const peopleCount = ref(28761153)
let intervalId = null

const digits = ref([])

watch(peopleCount, (newVal, oldVal) => {
  updateDigits(newVal, oldVal)
})

const formatAndSplit = (num) => {
  const formatted = num.toString().padStart(9, '0').slice(-9)
  return formatted.replace(/\B(?=(\d{3})+(?!\d))/g, '，').split('')
}
// 千分位格式化函数
const formatNumberWithCommas = (number) => {
  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};

const updateDigits = (newVal, oldVal = 0) => {
  const newDigits = formatAndSplit(newVal)
  const oldDigits = formatAndSplit(oldVal)

  // 重置所有数字的角度为0，准备动画
  digits.value = newDigits.map((d, i) => ({
    prev: oldDigits[i] || '0',
    next: d,
    angle: 0
  }))

  // 确保动画能正确触发
  setTimeout(() => {
    digits.value.forEach((d) => {
      d.angle = 180
    })
  }, 100)
}

// 新增自动递增方法
const startAutoIncrement = () => {
  intervalId = setInterval(() => {
    peopleCount.value += 1
  }, 2000)
}



// 组件自己的数据获取方法
function fetchData() {
  console.log('执行组件数据刷新')
  // 这里调用API获取数据
}

onMounted(() => {
  updateDigits(peopleCount.value)
  startAutoIncrement() // 启动自动递增
})

onUnmounted(() => {
  // 组件卸载时清除定时器
  if (intervalId) {
    clearInterval(intervalId)
  }
})
</script>

<style>
.flip-card {
  width: 50px;
  height: 65px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease-in-out;
  transform-style: preserve-3d;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 40px;
  font-weight: bold;
}

.flip-card-front {
  background-color: rgba(11, 99, 158, 0.7);
  color: white;
}

.flip-card-back {
  background-color: rgba(11, 99, 158, 0.7);
  color: white;
  /* transform: rotateX(180deg); */
}
.flip-card-back2 {
  background-color: transparent;
  color: white;
  /* transform: rotateX(180deg); */
}
</style>
